<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>登录-国家大剧院</title>
	<link rel="shortcut icon" href="./ego.ico" type="image/x-icon">
	<style>
		* {
			padding: 0;
			margin: 0;
		}

		.bgc {
			width: 100vw;
			height: 100vh;
			background: url('./images/login_bgc.png');
			background-size: cover;
		}

		.bgc .main {
			display: flex;
			justify-content: space-between;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 1146px;
			height: 472px;
		}

		.bgc .main .left {
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 627px;
			height: 100%;
		}

		.bgc .main .left .title {
			font-family: 宋体;
			font-style: normal;
			font-weight: 900;
			font-size: 48px;
			line-height: 60px;
			text-align: center;
			letter-spacing: 8px;
			color: #ffffff;
			padding: 0 0 16px 0;
			border-bottom: 4px solid white;
			margin-bottom: 8px;
		}

		.bgc .main .left p {
			font-family: 宋体;
			font-style: normal;
			font-weight: 900;
			font-size: 20px;
			line-height: 40px;
			text-transform: uppercase;
			color: #ffffff;
		}

		.right {
			height: 100%;
			width: 458px;
			background: rgba(6, 22, 48, 0.4);
			backdrop-filter: blur(20px);
			border: 2px solid rgba(128, 128, 128, 0.4);
			border-radius: 8px;
			padding: 0 64px;
			box-sizing: border-box;
		}

		.right .text-img {
			margin-top: 48px;
			margin-bottom: 42px;
		}

		.right .form div {
			margin-bottom: 20px;
		}

		.right .form label {
			display: block;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: 500;
			font-size: 12px;
			line-height: 20px;
			color: #ffffff;
		}

		.right .form input {
			width: 330px;
			color: white;
			background-color: transparent;
			border: 0;
			outline: none;
			padding: 10px 0 10px 2px;
			border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		}

		.right .form .captcha {
			position: relative;
		}

		.right .form div:nth-child(3) input {
			width: 160px;
			margin-right: 10px;
		}

		.right .form div:nth-child(3) img {
			cursor: pointer;
			position: absolute;
			bottom: 0;
		}

		.right .form ::-webkit-input-placeholder {
			color: rgba(255, 255, 255, 0.9);
		}

		.right .form .btn {
			border: 0;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: 500;
			font-size: 14px;
			line-height: 20px;
			color: #ffffff;
			background: #4c78fc;
			border-radius: 4px;
			padding: 11px 149px;
			box-sizing: border-box;
			cursor: pointer;
			margin-top: 12px;
			user-select: none;
		}
	</style>
</head>

<body>
	<div class="bgc">
		<div class="main">
			<div class="left">
				<h1 class="title">国家大剧院智慧管理平台</h1>
				<p>The Smart Management Platform of</p>
				<p>National Centre For The Performing Arts</p>
			</div>
			<div class="right">
				<img class="text-img" src="./images/login_text.svg" />
				<form id="form" class="form">
					<div class="username">
						<label for="username">账号</label>
						<input id="username" name="username" type="text" placeholder="请输入账号" maxlength="16" required />
					</div>
					<div class="password">
						<label for="pwd">密码</label>
						<input id="pwd" name="pwd" type="password" placeholder="请输入密码" minlength="6" maxlength="18" required />
					</div>
					<div class="captcha">
						<label for="captcha">验证码</label>
						<input id="captcha" name="captcha" type="text" placeholder="请输入验证码" maxlength="5" required />
						<img id="captcha-img" height="40" width="160" src="" />
					</div>
					<button class="btn">登录</button>
				</form>
			</div>
		</div>
	</div>
	</div>
	<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.19.0/js/md5.min.js"></script>
	<script>
		const BASE_URL = location.origin + '<%= VUE_APP_BASE_PATH %>'
		let user_id, captcha_id
		let language = ''
		let account = document.getElementById('username')
		let captcha = document.getElementById('captcha')
		let password = document.getElementById('pwd')
		let captchaImg = document.getElementById('captcha-img')
		let loginBtn = document.querySelector('.btn')
		captchaImg.addEventListener('click', changeCaptcha)
		loginBtn.addEventListener('click', login)

		function changeCaptcha() {
			captcha_id = String(Math.random())
			captchaImg.src = `${BASE_URL}/ego_base_info/v1/public/pwd/captcha?uuid=${captcha_id}`
		}

		function login() {
			let options = {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json;charset=UTF-8'
				},
				body: JSON.stringify({
					account: account.value.trim(),
					password: md5(password.value),
					captcha: captcha.value,
					user_id: account.value.trim(),
					captcha_id,
					language
				})
			}
			document.getElementById('username').value = document.getElementById('pwd').value = document.getElementById(
				'captcha').value = ''
			fetch(`${BASE_URL}/ego_base_info/v1/public/pwd/loginPost`, options).then(response => {
				return response.json()
			}).then(data => {
				if (data?.code === '000000') {
					window.location.replace('/')
				} else {
					changeCaptcha()
					alert(data?.msg)
				}
			}).catch((err) => {
				console.error(err)
			})
		}

		changeCaptcha()
	</script>
</body>

</html>